<template>
	<view class="container">
		<uni-card title="功能中心" :is-shadow="true" margin="20rpx" class="full-height-card">
			<view class="card-content">
				<view class="function-grid">
					<view 
						v-for="(item, index) in functionList" 
						:key="index" 
						class="function-item"
						@click="navigateTo(item.path)"
					>
						<view class="function-icon" :style="{ backgroundColor: item.color }">
							<uni-icons :type="item.icon" size="24" color="#fff"></uni-icons>
						</view>
						<text class="function-title">{{ item.title }}</text>
					</view>
				</view>
			</view>
		</uni-card>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				functionList: [
					{
						title: '阀门大屏',
						path: '/pages/valve-screen/valve-screen',
						icon: 'videocam',
						color: '#5555ff'
					},
					{
						title: '端阀门管理',
						path: '/pages/valve-management/valve-management',
						icon: 'settings',
						color: '#007aff'
					},
					{
						title: '阀门开关任务',
						path: '/pages/valve-task/valve-task',
						icon: 'checkbox-filled',
						color: '#4cd964'
					},
					{
						title: '端RFID绑定',
						path: '/pages/rfid-binding/rfid-binding',
						icon: 'link',
						color: '#f56c6c'
					},
					{
						title: '阀门操作',
						path: '/pages/valve-operation/valve-operation',
						icon: 'hand-up',
						color: '#f8b505'
					},
					{
						title: '日志记录',
						path: '/pages/log-record/log-record',
						icon: 'bars',
						color: '#909399'
					},
					{
						title: '消息推送',
						path: '/pages/message-push/message-push',
						icon: 'notification-filled',
						color: '#3a8cff'
					}
				]
			}
		},
		methods: {
			navigateTo(path) {
				uni.navigateTo({
					url: path
				});
			}
		}
	}
</script>

<style lang="scss">
	page {
		background-color: #fff;
		height: 100%;
	}
	
	.container {
		padding-bottom: 0;
		min-height: 100vh;
	}
	
	.full-height-card {
		min-height: calc(100vh - 140rpx);
		margin-bottom: 0 !important;
		box-shadow: none !important;
		
		:deep(.uni-card__content) {
			padding-bottom: 50rpx;
		}
	}
	
	.card-content {
		padding: 10rpx 0;
	}
	
	.function-grid {
		display: flex;
		flex-wrap: wrap;
		justify-content: space-between;
		padding: 20rpx;
	}
	
	.function-item {
		width: 30%;
		display: flex;
		flex-direction: column;
		align-items: center;
		margin-bottom: 40rpx;
	}
	
	.function-icon {
		width: 120rpx;
		height: 120rpx;
		border-radius: 20rpx;
		display: flex;
		justify-content: center;
		align-items: center;
		margin-bottom: 20rpx;
	}
	
	.function-title {
		font-size: 28rpx;
		color: #303133;
	}
</style>
